<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="推荐" name="recommended" v-infinite-scroll="load">
            <BlogItem v-for="item in blogItems" :key="item.id" :blogItem="item"
                @click="router.push(`blog/details/${item.id}`)">
            </BlogItem>
        </el-tab-pane>
        <el-tab-pane label="热门" name="hot" v-infinite-scroll="load2" :infinite-scroll-disabled="disabled">
            <BlogItem v-for="item in blogItems2" :key="item.id" :blogItem="item"
                @click="router.push(`blog/details/${item.id}`)">
            </BlogItem>
            <div class="noMore" v-if="disabled">
                暂时没有更多了...
            </div>
        </el-tab-pane>
        <el-tab-pane label="关注" name="attention" v-infinite-scroll="load3" :infinite-scroll-disabled="true">
            <BlogItem v-for="item in blogItems3" :key="item.id" :blogItem="item"
                @click="router.push(`blog/details/${item.id}`)">
            </BlogItem>
            <div class="noMore" v-if="true">
                暂时没有更多了...
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import BlogItem from '@/views/home/components/BlogItem.vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const blogItems = ref([{
    title: "【C++历险记】国庆专辑---探索多态迷宫的代码之旅",
    imgURL: new URL("@/assets/images/blogItemG.png", import.meta.url).href,
    desc: "文篇讨论了C++中的多态性概念，包括其定义、实现和基本原理。涵盖了虚函数、重写、虚函数表和动态绑定等主题。本文还探讨了虚函数表与继承之间的关系，包括单一继承和多重继承以及菱形继承。此外，解释了抽象类和接口及实现继承的概念。。",
    likeNum: 55,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-02",
    id: 1
}, {
    title: "解决谷歌浏览器无法自动播放HTML文件的声音和视频问题的方法",
    imgURL: new URL("@/assets/images/blogItemM.png", import.meta.url).href,
    desc: "解决谷歌浏览器无法自动播放视频和声音的方法",
    likeNum: 2,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-03-15",
    id: 2
}, {
    title: "uniapp实现app检查更新与升级-uni-upgrade-center详解",
    imgURL: new URL("@/assets/images/blogItemD.png", import.meta.url).href,
    desc: "uniapp官方开发的App版本更新的插件，基于unicloud的后端服务因为是开源的，通过修改源码可以实现请求java等其他后端服务，后续的源码解析章节会介绍升级中心分为两个部分：前台检测更新：uni-admin已内置 升级中心，直接使用即可。并且云函数废弃，使用云函数。uni-upgrade-center Admin管理后台(uni-admin 1.9.3+ 已内置，此插件不再维护)：请前往Gitee下载tag v0.5.1版本使用：请前往Gitee下载tag v0.4.2版本使用。",
    likeNum: 2,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-02-15",
    id: 3
}, {
    title: "【C++杂货铺】set 和 map 使用总结",
    imgURL: new URL("@/assets/images/headImage.png", import.meta.url).href,
    desc: "本篇文章介绍了 set 与 map 的使用",
    likeNum: 102,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-02",
    id: 4
}, {
    title: "vue3的基本使用(超详细)",
    imgURL: new URL("@/assets/images/blogItemN.png", import.meta.url).href,
    desc: "2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece特点：无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin。......",
    likeNum: 423,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-11-04",
    id: 5
}, {
    title: "vscode配置C/C++环境（超详细保姆级教学）",
    imgURL: new URL("@/assets/images/blogItemF.png", import.meta.url).href,
    desc: "大一上学期被学长安利了vscode，但是下载安装后不会配置，自己连查带问搞了七八个小时终于配置好了。后面身边很多同学也不会配，都来找我帮忙配，加上之前自己摸索着配的时候感觉网上没有详细又靠谱的教程，所以决定把配置的过程记录一下供大家参考，希望可以帮到跟我一样想用却不会配置vscode的同学们。",
    likeNum: 254,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-01-22",
    id: 6
}, {
    title: "【C++】：类和对象（2）",
    imgURL: new URL("@/assets/images/blogItemB.png", import.meta.url).href,
    desc: "C++类和对象第二讲，包含构造函数、析构函数、拷贝构造的详细介绍，以及代码演示，并且还包含多种运算符重载的详细介绍。",
    likeNum: 56,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-10-09",
    id: 7
}, {
    title: "常用的几种布局方式---Flex 布局(垂直居中展示）",
    imgURL: new URL("@/assets/images/blogItemT.png", import.meta.url).href,
    desc: "常用的几种布局方式---Flex 布局(垂直居中展示）",
    likeNum: 1,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-02-14",
    id: 8
}, {
    title: "Linux下安装和使用MySQL的详细教程",
    imgURL: new URL("@/assets/images/blogItemH.png", import.meta.url).href,
    desc: "Linux 下 MySQL 安装指令步骤 1：安装 MySQL步骤 2：启动 MySQL 服务步骤 3：设置 MySQL 根用户密码步骤 4：登录到 MySQLLinux 下 MySQL 使用指令其它常用指令1、利用指令修改mysql数据表中某个字段的长度2、查看mysql数据表结构3、给mysql数据表添加一个新的字段4、删除数据表的数据",
    likeNum: 59,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-09-13",
    id: 9
}, {
    title: "(完整版)HTML5常用标签大全",
    imgURL: "",
    desc: "(完整版)HTML5常用标签大全",
    likeNum: 13,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-10-19",
    id: 10
}, {
    title: "Linux系统安装部署MySQL完整教程（图文详解））",
    imgURL: new URL("@/assets/images/blogItemU.png", import.meta.url).href,
    desc: "最近网上翻阅了大量关于Linux安装部署MySQL的教程，在自己部署的时候总是存在一些小问题，例如：版本冲突，配置失败和启动失败等等，功夫不负有心人，最后还是安装部署成功了，所以本篇博客记录了我是如何完整一步步的安装部署MySQL起来的，每一行代码都进行了严格的测试，其中的坑博主已经替大家全部踩完了，完整详细的步骤都在这篇博客中了，特此分享！",
    likeNum: 26,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-08-24",
    id: 11
}, {
    title: "ECharts--中国地图（无敌详细）",
    imgURL: new URL("@/assets/images/blogItemM.png", import.meta.url).href,
    desc: "使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！",
    likeNum: 31,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-03-12",
    id: 12
}, {
    title: "【优雅的参数验证@Validated】@Validated参数校验的使用及注解详解——你还在用if做条件验证？",
    imgURL: new URL("@/assets/images/blogItemV.png", import.meta.url).href,
    desc: "你还在用if做条件验证？【优雅的参数验证@Validated】--@Validated参数校验的使用及注解详解",
    likeNum: 31,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-11-15",
    id: 13
}, {
    title: "C语言中的函数返回值、return用法、return 0详解",
    imgURL: "",
    desc: "定义：函数的返回值是指函数被调用之后，执行函数体中的代码所得到的结果，这个结果通过return语句返回。1) return 语句的一般形式为：return 表达式;return (表达式); 为了简明，（）一般不写。例如：return 0return 0；表示程序正常退出，即当return语句提供了一个值时，这个值就成为函数的返回值。return 1；表示程序异常退出，返回主调函数来处理，继续往下执行。",
    likeNum: 23,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2022-10-17",
    id: 14
}, {
    title: "Spring Boot项目中的Controller、Service、Mapper和Entity层的作用与联系",
    imgURL: new URL("@/assets/images/blogItemL.png", import.meta.url).href,
    desc: "在Spring Boot项目中，常见的四个层次是Controller层、Service层、Mapper层和Entity层。它们各自承担着不同的职责，但彼此之间存在着紧密的联系。本文将详细介绍这四个层次的作用与联系，并提供相关实例来说明它们之间的关系。",
    likeNum: 8,
    unlikeNum: 0,
    author: "x某人",
    releaseTime: "2023-06-22",
    id: 15
}
])

const activeName = ref('recommended')

const activeTabs = ref("recommended")
const handleClick = (tab, event) => {
    activeTabs.value = tab.props.name
}
const load = () => {
    if (activeTabs.value === "recommended")
        blogItems.value.push.apply(blogItems.value, blogItems.value)
}
const blogItems2 = ref()
blogItems2.value = blogItems.value.slice()
blogItems2.value.reverse()
const disabled = ref(false)
const count2 = ref()
const load2 = () => {
    if (activeTabs.value === "hot") {
        count2.value = 1
        blogItems2.value.push.apply(blogItems2.value, blogItems2.value)
        if (count2.value === 1) disabled.value = true
    }
}
const blogItems3 = ref()
blogItems3.value = blogItems.value.slice(5, 10)
const load3 = () => {
    // if (activeTabs.value === "attention")
    //     blogItems3.value.push.apply(blogItems3.value, blogItems3.value)
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-tabs__item.is-active {
//     color: #9286D1;
// }

// ::v-deep .el-tabs__item:hover {
//     color: #9286D1;
// }

// ::v-deep .el-tabs__active-bar {
//     background-color: #9286D1;
// }
.noMore {
    text-align: center;
    margin: 10px 0;
    font-size: 14px;
    color: #A8ABB2;
}
</style>
  